<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>rect_circle_ellipse</title>
</head>
<body style="display:flex;gap: 50px;">
    <div>
        <div> 矩形</div> 
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <rect x="50" y="20" width="300" height="100" fill="yellow" stroke-width="3" stroke="#000"/>
        </svg>
        <br>
        
        <div>带圆角的矩形</div>  
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <rect x="50" y="20" width="300" height="100" fill="yellow" stroke-width="3" stroke="#000" rx="20" ry="20"/>
        </svg>
    
        
        <div>圆</div>  
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <circle cx="50" cy="50" r="40" stroke="black" stroke-widht="3" fill="red"/>
        </svg>
        <div>椭圆, 椭圆中心xy左边cx,cy; 椭圆的xy半径:rx,ry</div>  
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <ellipse cx="200" cy="60" rx="100" ry="50" stroke="purple" stroke-widht="3" fill="purple"/>
        </svg>
    </div>

    <div>
        <div>线条</div>  
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <line x1="200" y1="60" x2="100" y2="50" stroke="purple" stroke-widht="3" />
        </svg>
        <div>多边形</div>  
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <polygon points="100,100 50,5 10,80" stroke="purple" stroke-widht="3" fill="red" />
        </svg>
        <div>折线, 注意 fill=none</div>  
        <svg width="400" height="120">
            <rect width="400" height="120" fill="#eee"/>
            <polyline points="100,100 50,5 10,80" stroke="purple" stroke-widht="3" fill="none" />
        </svg>
    </div>
</body>
</html>